<template>
  <n-modal
    v-model:show="show"
    :style="{ width }"
    preset="card"
    :title="title"
    size="huge"
    :bordered="false"
    :class="{ 'edit-card-modal': cardStyle }"
  >
    <slot />
    <template v-if="showFooter" #action>
      <n-button @click="show = false">取消</n-button>
      <n-button :loading="loading" ml-20 type="primary" @click="emit('onSave')">确认</n-button>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
const props = defineProps({
  width: {
    type: String,
    default: '560px'
  },
  cardStyle: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  visible: {
    type: Boolean,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'onSave'])
const show = computed({
  get() {
    return props.visible
  },
  set(v) {
    emit('update:visible', v)
  }
})
</script>
